<h4>100 steps, snap off</h4>
<div id="area">
	<div id="knob"></div>
</div>
<p id="upd">XX</p>
<hr/>
<h4>10 steps, snap on</h4>
<div id="area2">
	<div id="knob2"></div>
</div>
<p id="upd2">XX</p>

<style type="text/css" media="screen">
	#area, #area2 {
		background: #ccc;
		height: 20px;
		width: 200px;
	}
	#knob, #knob2 {
		height: 20px;
		width: 20px;
		background: #000;
		cursor:pointer;
	}
</style>